import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text, Image, ScrollView } from '@tarojs/components'
import { Loading } from '@components'
import { connect } from '@tarojs/redux'
import * as actions from '@actions/order'
import './payResult.scss'

@connect(state => state.order, actions)
class PayResult extends Component {
  config = {
    navigationBarTitleText: '支付结果'
  }

  constructor (props) {
    super(props)
    const params = this.$router.params;
    this.state = {
      payMsg: params.msg,
      orderNo: params.orderNo,
      payAmount: params.payAmount
    }
  }

  componentDidShow() {

  }

  handleOrder = () => {
    Taro.redirectTo({
      url: '/pages/orderInfo/orderInfo?orderNo=' + this.state.orderNo
    })
  }

  handleIndex = () => {
    Taro.switchTab({
      url: '/pages/home/home'
    })
  }

  handleRePay = () => {
    this.props.dispatchOrderPay({orderNo: this.state.orderNo}).then(data => {
      Taro.requestPayment(data).then(res => {
        this.setState({payMsg: res.errMsg})
      })
    })
  }

  render () {
    const isPaySuccess = (this.state.payMsg === 'requestPayment:ok')
    return (
      <View className='pay-result'>
        <View className='pay-result__info'>

          {isPaySuccess
              ?
              <View className='pay-result__info-msg'>
                <View className='pay-result__info-msg-res'>支付成功</View>
              </View>
              :
              <View className='pay-result__info-msg'>
                <View className='pay-result__info-msg-res'>支付失败</View>
                <View className='pay-result__info-msg-remark'>请在<Text className='pay-result__txt-primary'>1小时</Text>内完成付款</View>
                <View className='pay-result__info-msg-remark'>否则订单会被系统取消</View>
              </View>
          }

          {isPaySuccess
              ?
               <View className='pay-result__info-opt'>
                <Button className='pay-result__info-opt-btn' onClick={this.handleOrder}>
                  <Text className='pay-result__info-opt-txt'>
                    查看订单
                  </Text>
                </Button>
                <Button className='pay-result__info-opt-btn' onClick={this.handleIndex}>
                  <Text className='pay-result__info-opt-txt'>
                    继续逛
                  </Text>
                </Button>
              </View >
              :
              <View className='pay-result__info-opt'>
                <Button className='pay-result__info-opt-btn' onClick={this.handleOrder}>
                  <Text className='pay-result__info-opt-txt'>
                    查看订单
                  </Text>
                </Button>
                <Button className='pay-result__info-opt-btn' onClick={this.handleRePay}>
                  <Text className='pay-result__info-opt-txt'>
                    重新支付
                  </Text>
                </Button>
              </View >
          }

        </View>


        <View className='pay-result__order'>
          <View className='pay-result__order-row'>
            <Text className='pay-result__order-key'>订单号：</Text>
            <Text className='pay-result__order-value'>{this.state.orderNo}</Text>
          </View>
          <View className='pay-result__order-row'>
            <Text className='pay-result__order-key pay-result__txt-primary'>实付：</Text>
            <Text className='pay-result__order-value pay-result__txt-primary'>¥{this.state.payAmount}</Text>
          </View>
        </View>
      </View>
    )
  }
}

export default PayResult
